<template>
  <div id="app">
	 
	 
	 <div class="item menu"> 

			<ul>
				
				<li><router-link to="/user">用户管理</router-link> </li>
				<li><router-link to="/role">角色管理</router-link> </li>
				<li><router-link to="/menu">菜单管理</router-link> </li>
				
			</ul>
	  
	  </div>
	 <div class="item content">
		 
		 <!-- 
		 
		   官方插件   Vue-Router  需要安装	
		   {   path:'/user',component:User }
		   {   path:'/role',component:Role }
		   {   path:'/menu',component:Menu }
		 router-view 根据路由url  path:'/?' 动态映射关系中找具体的组件 -->
		 <router-view></router-view>
		 
		 
	 </div>
	
	 
  </div>
</template>

<script>

 
	

export default {
  name: 'App',
  data(){
	  return {
		  selected:2
	  }
  },
  //局部组件
  components:{
	
  }

 }
</script>

<style scoped>
  #app{
	  margin: 10px;
  }
  .item{
	  vertical-align: top;
	  display: inline-block;
	  height: 100vh;
	  border:dashed 1px grey;
  }
  
  .menu{
	  width: 200px;
  }
  
  .content{
	  width: 1000px;
  }

</style>
